<template>
  <div class="app-container">
    <el-card v-loading="loading" class="detail-card">
      <template #header>
        <div class="card-header">
          <span>指标详情</span>
          <el-button type="primary" size="small" @click="toggleSqlView">
            {{ showSql ? "关闭查看" : "查看SQL" }}
          </el-button>
        </div>
      </template>

      <div v-if="indicatorDetail" class="detail-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">指标ID：</span>
              <span class="detail-value">{{ indicatorDetail.id }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">指标名称：</span>
              <span class="detail-value">{{ indicatorDetail.indicatorName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">数据源名称：</span>
              <span class="detail-value">{{ indicatorDetail.dataSourceName || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">指标域名称：</span>
              <span class="detail-value">{{ indicatorDetail.domainName || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">别名：</span>
              <span class="detail-value">{{ indicatorDetail.alias || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">标签：</span>
              <span class="detail-value">{{ indicatorDetail.tag || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">部门：</span>
              <span class="detail-value">{{ indicatorDetail.department || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">主题ID：</span>
              <span class="detail-value">{{ indicatorDetail.subjectId || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">分组名称：</span>
              <span class="detail-value">{{ indicatorDetail.groupName || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">聚合方式：</span>
              <span class="detail-value">{{ indicatorDetail.aggregationMethod || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">数据类型：</span>
              <span class="detail-value">{{ indicatorDetail.dataType || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">长度：</span>
              <span class="detail-value">{{ indicatorDetail.size || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">精度：</span>
              <span class="detail-value">{{ indicatorDetail.digit || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">指标表名：</span>
              <span class="detail-value">{{ indicatorDetail.tableName || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">创建人：</span>
              <span class="detail-value">{{ indicatorDetail.creator || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">创建时间：</span>
              <span class="detail-value">{{ indicatorDetail.createTime || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">更新时间：</span>
              <span class="detail-value">{{ indicatorDetail.updateTime || "无" }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="detail-item">
              <span class="detail-label">指标描述：</span>
              <span class="detail-value">{{ indicatorDetail.description || "无" }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <div v-else-if="!loading" class="no-data">暂无指标详情数据</div>

      <!-- SQL显示区域 -->
      <div v-if="showSql && sql" class="sql-container">
        <div class="sql-header">
          <span>SQL语句</span>
          <el-button type="text" size="small" @click="copySql">复制</el-button>
        </div>
        <pre class="sql-content">{{ sql.sql || "暂无SQL语句" }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, onMounted } from "vue";
import { ElMessage, ElButton } from "element-plus";
import IndicatorAPI, {
  IndicatorInfoResponse,
  ExmaineSqlResponse,
} from "@/api/indicationManage/indexNew";

defineOptions({
  name: "IndicatorDetail",
});

const props = defineProps<{
  indicatorId: number;
}>();

const loading = ref(false);
const indicatorDetail = ref<IndicatorInfoResponse>();

// 控制SQL显示/隐藏
const showSql = ref(false);

const sql = ref<ExmaineSqlResponse>({});

// 切换SQL显示状态
const toggleSqlView = () => {
  showSql.value = !showSql.value;
};

// 复制SQL到剪贴板
const copySql = () => {
  if (indicatorDetail.value?.sql) {
    navigator.clipboard
      .writeText(indicatorDetail.value.sql)
      .then(() => {
        ElMessage.success("SQL已复制到剪贴板");
      })
      .catch((err) => {
        ElMessage.error("复制失败，请手动复制");
        console.error("复制SQL失败:", err);
      });
  }
};

// 在组件挂载时加载数据
onMounted(() => {
  if (props.indicatorId) {
    getIndicatorDetail(props.indicatorId);
  }
});

// 获取指标详情
const getIndicatorDetail = async (id: number) => {
  loading.value = true;
  try {
    const response = await IndicatorAPI.Info({ id });
    indicatorDetail.value = response;
    // 获取指标SQL
    await IndicatorAPI.Sql({ id }).then((res) => {
      sql.value = res;
    });
  } catch (error) {
    ElMessage.error("获取指标详情失败");
    console.error("获取指标详情失败:", error);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.detail-card {
  height: 100%;
  margin-top: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-content {
  padding: 20px 0;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.detail-label {
  width: 120px;
  font-weight: bold;
  color: #ffffff;
}

.detail-value {
  flex: 1;
  color: #ffffff;
}

.no-data {
  padding: 40px 0;
  color: #f0f0f0;
  text-align: center;
}

.sql-container {
  padding: 16px;
  margin-top: 20px;
  overflow: hidden;
  background-color: #1e1e1e;
  border-radius: 8px;
}

.sql-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #ffffff;
}

.sql-content {
  width: 100%;
  height: auto;
  max-height: 400px;
  padding: 10px;
  overflow: auto;
  font-family: monospace;
  color: #d4d4d4;
  word-break: break-all;
  white-space: pre-wrap;
  background-color: #2d2d2d;
  border-radius: 4px;
}
</style>
